/**
 *  基于 react-transition-group 封装
 *  文档：https://blog.csdn.net/weixin_46193248/article/details/108360517
 */

import React, {FC} from "react";
import {CSSTransition} from 'react-transition-group'
import {CSSTransitionProps} from "react-transition-group/CSSTransition";

type AnimationName = 'zoom-in-top' | 'zoom-in-left' | 'zoom-in-bottom' | 'zoom-in-right'

type TransitionProps = {
  animation?: AnimationName // 动画名称
  wrapper?: boolean // 是否需要父容器，有些标签自带transition属性，与CSSTransition发送冲突
} & CSSTransitionProps

const Transition: FC<TransitionProps> = (props) => {
  const {classNames, children, animation, wrapper, ...restProps} = props
  return (
    <CSSTransition
      classNames={classNames ? classNames : animation}
      {...restProps}
    >
      {wrapper ? <div>{children}</div> : children}
    </CSSTransition>
  )
}

Transition.defaultProps = {
  unmountOnExit: true,
  appear: true
}

export default Transition;

